/*
 * @Title: 驴友圈首页
 * @Created by: gsjPC 
 */
<template>
	<view>
		<block>
			<IndexHead :config="navConfig" :rightIcoHandle="rightIcoHandle"/>

			<view class="fakeInputStyle" @tap="showSearchPage = true">
				<text class="iconfont">&#xe668;</text>
				搜索
			</view>

			<!-- tab切换 -->
			<view class="chatBox">
				<view class="addTc" v-if="isShowAddTc">
					<view @touchstart="isShowAddTc =!isShowAddTc" class="invisible-mask"></view>
					<view class="addTc-list"><image src="/static/lyqSao.png"></image><text>扫一扫</text></view>
					<view class="addTc-list"><image src="/static/lvyBuild.png"></image><text>新建群聊</text></view>
					<view class="addTc-list"><image src="/static/lyqAdd.png"></image><text>添加好友</text></view>
					<view class="addTc-list"><image src="/static/lyqHelp.png"></image><text>帮助与反馈</text></view>
				</view>
				<view class="tab-wrap">
					<view class="tab-wrap-item" @tap="curTabIndex = 0">
						<!-- 聊天记录未读总数 记录 -->
						<uni-badge v-if="canLoadRecordData && allNotReadNumber != 0" type="error" class="tab-record-total-badage" :text="allNotReadNumber"   />
						<text :class="{'tabActive':curTabIndex == 0}">聊天记录</text>
					</view>
					<view class="tab-wrap-item" @tap="curTabIndex = 1">
						<text :class="{'tabActive':curTabIndex == 1}">联系人</text>
					</view>
					<view class="tab-wrap-item" @tap="curTabIndex = 2">
						<text :class="{'tabActive':curTabIndex == 2}">群聊</text>
					</view>
					<view class="tab-wrap-item" @tap="curTabIndex = 3">
						<text :class="{'tabActive':curTabIndex == 3}">附近人</text>
					</view>
				</view>
			
				<!-- 切换内容区域 -->
				<chat-recode 
					@initData="canLoadRecordData = true"
					ref='chatRecord' 
					v-if="curTabIndex == 0"></chat-recode>
				<uni-indexed-list 

					:options="linkList" 
					:showSelect="false" 
					@click="bindClick" 
					v-if="curTabIndex == 1"/>
				
				<group-chat ref="groupChat" v-if="curTabIndex == 2"></group-chat>
				<nearby-people v-if="curTabIndex == 3"></nearby-people>
			</view>
		</block>

		<!-- 整个搜索页 -->
		<block v-if="showSearchPage" >
			<view class="search-page-root" :style="{paddingTop:statusBarHeight + 'px'}">

				<view class="search-page-header">
					<view @tap="showSearchPage = false" class="iconfont">&#xe618;</view>
					<view class="input-wrap">
						<text class="iconfont">&#xe668;</text>
						<input type="text" />
					</view>
					
				</view>

				<view class="search-page-main">

				<view class="main-contact-person">
					<view class="contact-person-title">
						联系人
					</view>
					<view class="list-wrap">
						<view class="list-item">
							<view class="left">
								<image src="../../static/testTx1.jpg" />
							</view>
							<view class="right">
								小明
							</view>
						</view>
					</view>
				</view>

				<view class="main-contact-record">
					<view class="contact-person-title">
						聊天记录
					</view>
					<view class="list-wrap">
						<view class="list-item">
							<view class="left">
								<image src="../../static/testTx1.jpg" />
							</view>
							<view class="right">
								<text>外国人</text>
								<text>呕吼</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			</view>

			

		</block>
	</view>
</template>

<script>
	import getSpell from '@/common/hz2py'
	import contactlist from '@/common/contactlist.js'
	import uniIndexedList from '@/components/uni-indexed-list/uni-indexed-list'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import chatRecode from './chatRecode'
	import groupChat from './groupChat'
	import nearbyPeople from './nearbyPeople'
	export default{
		components:{
			uniIndexedList,
			uniBadge,
			chatRecode,
			groupChat,
			nearbyPeople
		},
		
		data(){
			return{
				navConfig:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch:false,
						hasMenu:false,
						hasTitle:true,
						minHead:false,
					},
					left: {
						img:'',
						text:'',
						showBack:false
					},
					mid:{
						title:'驴友圈',
						hasSearchMid:false,
						showAddIcon:true,
						rightIco:'/static/lvyAddIco.png'
					},
					
				},
				
				isShowAddTc:false,//默认隐藏+弹层
				curTabIndex: 0,
				canLoadRecordData: false,
				showSearchPage: false, // 是否暂时搜索页面
				contactOver: false, // 联系人是否获取完成
				contactList: []
			}
		},
		computed: {
			linkList() {
				// #ifndef H5
				if(!this.contactOver) return [];
				let list = JSON.parse(JSON.stringify(this.contactList));
				list.unshift({letter: '*', data: []})
				list.push({letter: '#', data: []})
				return list;
				// #endif
				
				
				
				// #ifdef H5
				contactlist.list = contactlist.list.map((item,index) => {
					if(index>4){
						item.data = []
					};
					return item;
				})//联系人数据
				return contactlist.list
				// #endif
				
			},
			allNotReadNumber() {

				// return '334'

				if(!this.canLoadRecordData) return '0';
				// console.log(global.test.$refs.chatRecord.chatList.length)
				// let totalString = `r?${this.$refs.chatRecord.chatList.length}`;
				// return totalString
				var resultNumber = this.$refs.chatRecord.chatList.reduce( (prev, cur, ind) => {
					if(ind == 1) {
						prev = prev.hasOwnProperty('ifNotRead') && prev.hasOwnProperty('notReadNum') ? prev.notReadNum : 0;
					};
					let curValue = cur.hasOwnProperty('ifNotRead') && cur.hasOwnProperty('notReadNum') ? cur.notReadNum : 0;
					return Number(curValue) + Number(prev)
				});
				console.log(resultNumber)
				console.log(typeof resultNumber)
				return String(resultNumber);
			},
			statusBarHeight() {
				return global.statusBarHeight	
			}
		},
		watch: {
			'showSearchPage': {
				immediate: true,
				handler: function(val) {
					if(val) {
						uni.hideTabBar();
					} else {
						uni.showTabBar();
					}
				}
			},
			'curTabIndex': {
				immediate: true,
				handler: function(val) {
					if(val == 0) {
						
						// this.$nextTick(() => {
						// 	this.canLoadRecordData = true;
						// })
					} else {
						this.canLoadRecordData = false;
					}
				}
			}
		},
		methods:{
			// 获取联系人信息
			bindClick(e){
				console.log('点击item，返回数据' + JSON.stringify(e))
			},
			rightIcoHandle(){
				// #ifdef H5
				this.isShowAddTc = !this.isShowAddTc;
				// #endif

				// #ifndef H5
				var that = this.$parent;
				that.isShowAddTc = !that.isShowAddTc;
				// #endif
				
			},
			
			getContacts() {
				let typePhone = plus.contacts.ADDRESSBOOK_PHONE, // 手机联系人
					typeSim = plus.contacts.ADDRESSBOOK_SIM, // sim 卡联系人
					usingType = typePhone;
				plus.contacts.getAddressBook( 
					usingType, 
					(addressbook ) => {
						addressbook.find(
						['displayName'], 
						contacts => {
							console.log('获取实际联系人成功')
							console.warn(JSON.stringify(contacts))
							console.log(`长度: ${contacts.length}`)
							let displayNamesSorted = contacts
							.map( contact => {
								let pinYin = getSpell(contact.displayName).toLowerCase();
								return {
									letter: pinYin.substring(0,1),
									pinYin,
									displayName: contact.displayName
								}
							})
							.sort( function(a,b) { return a.pinYin > b.pinYin ? 1 : -1 } );
							console.log(JSON.stringify(displayNamesSorted))
							// 去重
							displayNamesSorted = Array.from(new Set(displayNamesSorted.map(it => it.letter)))
							.map( letter => {
								let data = [];
								displayNamesSorted.forEach( contact => {
									if(contact.letter == letter) {
										data.push(contact.displayName);
									}
								});
								return {
									letter: letter.toUpperCase(),
									data
								}
							});
							console.log(JSON.stringify(displayNamesSorted));
							// A - Z 数组
							let A2Z = (() => {
								let result = [];
								for (let i = 65; i <= 90; i++) {
								    let letter = String.fromCharCode(i);
									result.push(letter)
								};
								return result;
							})();
							// 找出没有的 通讯录中没有存在的字母，data 给个初始值
							displayNamesSorted = A2Z.map( letter => {
								let HasCurLetterItems = displayNamesSorted.filter( item => item.letter == letter);
								if(HasCurLetterItems.length) {
									return HasCurLetterItems[0]
								} else {
									return {letter, data: []}
								}
							})
							
							this.contactOver = true;
							this.contactList = displayNamesSorted;
							
						},
						() => {
							console.error('获取实际联系人错误')
						}
						)
					}, 
					(error) => {
						console.error(error)
						console.error('获取联系人异常')
					})
			}
			
		},
		onShow() {
			global.test = this;
			// #ifndef H5
			this.getContacts();
			// #endif
			
			this.$nextTick(() =>{
				console.log(this.$refs)
				switch(this.curTabIndex) {
					case 0:
						this.$refs.chatRecord.initData();
					break;
					case 2:
						this.$refs.groupChat.initGroupChatList();
					break;
				}
				// this.$refs.chatRecord.initData()
			})
			
		},
	}
</script>

<style>
	.chatBox{
		width:692upx;
		margin: -120upx auto 0 auto;
		padding: 52upx 12upx 0 12upx;
		background-color: transparent;
		position: relative;
		z-index: 10;
		box-sizing: border-box;
		border-radius: 6upx 6upx 0 0 ;
		max-height: 80vh;
		/* overflow: hidden; */
	}
	.tab-wrap{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding:0 14upx;
		margin-bottom:42upx;
	}
	.tab-wrap-item{
		flex-grow: 1;
		width:150upx;
		height: 44upx;
		font-size: 26upx;
		text-align: center;
		line-height: 44upx;
		position: relative;
	}
	.tab-record-total-badage {
		position: absolute;
		top: -25upx;
		left: -25upx;
		z-index: 50;
		/* background: rgba(251,73,73,1.00); */
	}
	.tabActive{
		display: block;
		width:150upx;
		height: 44upx;
		background: linear-gradient(left,#54B1FF,#5691FF);
		color: #ffffff;
		border-radius: 44upx;
	}
	
	.addTc{
		background-color: #559CFF;
		width:272upx;
		position: absolute;
		z-index: 11;
		right:0upx;
		top:-96upx;
	}

	.invisible-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* #ifdef MP-WEIXIN */
	.addTc{
		top:-1upx;
	}
	/* #endif */
	.addTc-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 75upx;
	}
	.addTc-list image{
		max-width: 40upx;
		max-height: 40upx;
		margin-left: 15upx;
	}
	.addTc-list text{
		padding-left:20upx;
		font-size: 28upx;
		color: #FFFFFF;
		border-bottom:1upx solid #BAC5FB;
		display: block;
		line-height: 75upx;
		width:197upx;
	}
	.addTc-list:last-child text{
		border-bottom: none;
	}

	/* 顶部搜索样式 */
	.fakeInputStyle {
		position: relative;
		z-index: 10;
		height: 60upx;
		width: 650upx;
		margin: -160upx auto 150upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		background-color: rgba(255, 255, 255, .4);
		color: #fff;
		border-radius: 60upx;
		font-size: 24upx;
	}

	.fakeInputStyle > text {
		color: #fff;
		margin-right: 10upx;
	}

	/* 搜索页 */
	.search-page-root {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		width: 100vw;
		height: 100vh;
		background: #fff;
		/* padding: 30upx; */
		box-sizing: border-box;
	}

	.search-page-header {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 30upx 20% 30upx 20upx;
		/* padding-right: 20%; */
		box-sizing: border-box;
		border-bottom: 1px solid #F5F5F5;
	}

	.search-page-header > .iconfont {
		/* width: 40upx;
		height: 40upx; */
		font-size: 25px;
		padding: 0 20upx;
		flex-shrink: 0;
		color: rgba(51,51,51,1.00);
		margin-right: 20upx;
	}

	.search-page-header > .input-wrap {
		flex-grow: 1;
		position: relative;
		/* border-radius: 30upx; */
		
		/* padding: 15upx 25upx; */
	}

	.input-wrap > .iconfont {
		/* width: 30upx;
		height: 30upx; */
		font-size: 22px;
		/* padding: 0 20upx; */
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		bottom: 0;
		left: 30upx;
		margin: auto;
		color: rgba(175,175,175,1.00);
	}

	.input-wrap > input {
		border-radius: 50upx;
		padding: 15upx 25upx 15upx 95upx;
		background-color: #F5F5F5;
	}


	/* 联系人 */
	.main-contact-person, .main-contact-record {
		padding: 40upx;
		box-sizing: border-box;
		border-bottom: 20upx solid #F5F5F5;
		display: flex;
		flex-direction: column;
	}

	view.main-contact-record {
		border: none;
	}
	.contact-person-title {
		font-size: 28upx;
		color: rgba(153,153,153,1.00);
		margin-bottom: 40upx;
	}

	.list-item {
		display: flex;
		align-items: center;
	}

	.list-item .left {
		width: 80upx;
		height: 80upx;
		margin-right: 40upx;
	}

	.list-item .left image {
		width: 100%;
		height: 100%;
	}

	.list-item .right {
		font-size: 28upx;
		color: rgba(0,0,0,1.00);
	}

	.main-contact-record .right {
		display: flex;
		flex-direction: column;
	}
</style>
